import 'dart:math';

import 'package:base_flutter/base_flutter.dart';
import 'package:fan_da_app/res/drawables.dart';
import 'package:fan_da_app/utils/app_ext.dart';
import 'package:fan_da_app/widget/my_sliver_delegate.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_svg/flutter_svg.dart';

import '../view_model/home_main_view_model.dart';
import 'food_list_fragment.dart';

class HomeMainPage extends BaseStatefulMvvmWidget {
  @override
  State<StatefulWidget> createState() => _HomeMainState();
}

class _HomeMainState extends BaseMvvmState<HomeMainViewModel, HomeMainPage>
    with TickerProviderStateMixin {
  late ScrollController controller;

  TabController? tabController;

  var curIndex = 0;

  @override
  void initState() {

    controller = ScrollController();
    super.initState();

  }

  @override
  Widget? buildLoadingContentView() {
    return tabController==null?Container(): CustomScrollView(
      controller: controller,
      slivers: [
        SliverAppBar(
          pinned: true,
          title: Center(
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(
                  Icons.search,
                  color: Colors.white,
                ),
                SizedBox(
                  width: 8,
                ),
                Text(
                  '今天要吃点什么呢？',
                  style: TextStyle(
                      fontFamily: alimama, fontSize: 13, color: Colors.white),
                )
              ],
            ).addToContainer(
                constraints: BoxConstraints(minWidth: 250),
                decoration: BoxDecoration(
                    color: Color(0xffeeeeee).withOpacity(0.5),
                    borderRadius: 20.borderRadius),
                padding: EdgeInsets.symmetric(horizontal: 20, vertical: 8)),
          ),
          backgroundColor: mainColor,
          expandedHeight: 200,
          elevation: 0,
          flexibleSpace: FlexibleSpaceBar(
              background: Stack(
            children: [
              Container(
                color: mainColor,
              ),
            ],
          )),
        ),

        if(viewModel.item.isEmpty)
        SliverToBoxAdapter(
          child: noFood(context),
        ),

        if(viewModel.item.isNotEmpty)
        ...[
          SliverPersistentHeader(
            delegate: MySliverDelegate(
                minHeight: 80,
                maxHeight: 80,
                child: TabBar(
                  indicatorColor: Colors.transparent,
                  indicatorSize: TabBarIndicatorSize.label,
                  overlayColor: MaterialStateProperty.all(Colors.transparent),
                  tabs: List.generate(viewModel.item.length, (index) {
                    var e = viewModel.item[index];
                    return Tab(
                      height: 70,
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          SvgPicture.asset(
                            'images/food/jitui.svg',
                            width: 40,
                            height: 40,
                          ).addToContainer(
                              decoration: BoxDecoration(
                                color: curIndex==index? Colors.white:bgColor,
                                border: Border.all(color:curIndex==index?mainColor: bgColor),
                                shape: BoxShape.circle,
                              )
                          ),
                          SizedBox(height: 4,),
                          Text(e,style: TextStyle(color: curIndex==index?Colors.white:Colors.black,fontSize: 12),).addToContainer(
                              decoration: BoxDecoration(
                                  color:curIndex==index?mainColor: Colors.transparent,
                                  gradient: LinearGradient(colors: curIndex==index?[mainColor,mainColor.withOpacity(0.6)]:[Colors.transparent,Colors.transparent],
                                      begin: Alignment.topLeft,end: Alignment.bottomRight),
                                  borderRadius: 20.borderRadius
                              ),
                              padding: EdgeInsets.symmetric(horizontal: 8,vertical: 1)
                          )
                        ],
                      ),
                    );
                  }),
                  controller: tabController,
                ).addToContainer(color: Colors.white)),
            pinned: true,
          ),
          SliverFillRemaining(
            child: TabBarView(children: viewModel.item.map((e) => FoodListFragment(type: e,)).toList(),controller: tabController,),
          )
        ]
      ],

    );
  }

  @override
  void onViewModelCreated() {
    super.onViewModelCreated();
    viewModel.onStatusComplete = (){
      setState(() {
        tabController = TabController(length: viewModel.item.length, vsync: this);
      });
      tabController?.addListener(() {
        setState(() {
          curIndex = tabController!.index;
        });
      });
    };
  }

  @override
  Widget buildRootView(BuildContext context, Widget loadingContentWidget) {
    return Scaffold(
      backgroundColor: Color(0xffeeeeee),
      body: loadingContentWidget,
    );
  }

  @override
  HomeMainViewModel createViewModel() {
    return HomeMainViewModel(context);
  }

  @override
  void onRetryClick() {}

  @override
  void dispose() {
    super.dispose();
    controller.dispose();
    tabController?.dispose();
  }
}

// Widget noFoodType(BuildContext context) {
//   return Center(
//     child: Column(
//       mainAxisSize: MainAxisSize.min,
//       children: [
//         SvgPicture.asset(
//           image_table,
//           width: 150,
//         ),
//         SizedBox(
//           height: 10,
//         ),
//         Text(
//           "还没有创建菜品分类哦～～",
//           style: TextStyle(fontFamily: alimama, fontWeight: FontWeight.bold),
//         ),
//         SizedBox(
//           height: 20,
//         ),
//         UnconstrainedBox(
//           child: TextButton(
//             onPressed: () {},
//             child: Row(
//               mainAxisSize: MainAxisSize.min,
//               children: [
//                 Icon(
//                   Icons.add,
//                   color: Colors.white,
//                   size: 20,
//                 ),
//                 SizedBox(
//                   width: 8,
//                 ),
//                 Text(
//                   '创建分类',
//                   style: TextStyle(fontFamily: alimama, color: Colors.white),
//                 )
//               ],
//             ),
//             style: ButtonStyle(
//                 maximumSize: MaterialStateProperty.all(Size(220, 40)),
//                 minimumSize: MaterialStateProperty.all(Size(130, 40)),
//                 backgroundColor: MaterialStateProperty.all(Colors.grey[800])),
//           ),
//         )
//       ],
//     ),
//   ).addToContainer(height: max(context.querySize.height - 450, 400));
//
// }

Widget noFood(BuildContext context) {
  return Center(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        SvgPicture.asset(
          image_table,
          width: 150,
        ),
        SizedBox(
          height: 10,
        ),
        Text(
          "还没有添加菜品哦～～",
          style: TextStyle(fontFamily: alimama, fontWeight: FontWeight.bold),
        ),
        SizedBox(
          height: 20,
        ),
        UnconstrainedBox(
          child: TextButton(
            onPressed: () {},
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(
                  Icons.add,
                  color: Colors.white,
                  size: 20,
                ),
                SizedBox(
                  width: 8,
                ),
                Text(
                  '添加菜品',
                  style: TextStyle(fontFamily: alimama, color: Colors.white),
                )
              ],
            ),
            style: ButtonStyle(
                maximumSize: MaterialStateProperty.all(Size(220, 40)),
                minimumSize: MaterialStateProperty.all(Size(130, 40)),
                backgroundColor: MaterialStateProperty.all(Colors.grey[800])),
          ),
        )
      ],
    ),
  ).addToContainer(height: max(context.querySize.height - 450, 400));

}
